<template>
  <CocosScene ref="scene">
      <!-- <Node v-if="spriteComponent" :props="{components:[
        spriteComponent
      ]              
      ,name:'center',width:512,height:512,opacity:opacity}">
        <Node :props="{components:[
          spriteComponent
        ]              
        ,name:'c1',width:512,height:512,opacity:opacity,x:-200,y:200,scaleX:0.5,scaleY:0.5}"/>
        <Node :props="{components:[
          spriteComponent
        ]              
        ,name:'c2',width:512,height:512,opacity:opacity,x:200,y:-200,scaleX:0.5,scaleY:0.5}"/>
      </Node>
      <Node v-if="spriteComponent" :props="{components:[
        spriteComponent
      ]              
      ,name:'lb',width:512,height:512,opacity:opacity,x:-200,y:-200}"/> -->
      <!-- <Node ref="sprite" :nodeComps="comps" :nodeProps="{name:'cb',width:512,height:512,opacity:opacityt,x:-200,y:-200}" /> -->
      <!-- <Node ref="sprite" :nodeComps="[scomp]" :nodeProps="{name:'cb',width:512,height:512,opacity:opacity,x:-200,y:-200}" /> -->
      <!-- <Node :nodeComps="comps" :nodeProps="{name:'rt',width:512,height:512,opacity:opacity,x:200,y:200}">
              <Node :nodeComps="comps" :nodeProps="{name:'lb',width:512,height:512,opacity:opacity,x:-200,y:-200,rotation:45,color:clTwo}"/>
      </Node> -->
      <!-- <Sprite ref="sprite" :spriteProps="sprops" :spriteFrame="frame" :nodeComps="[ncomp]" :nodeProps="nprops" /> -->
      <Node v-if="frame">
        <Sprite v-for="(arr,i) in farrs" :key="i" :spriteFrame="frame" :nodeProps="arr" />
      </Node>
      <Node v-if="attframes">
        <AnimationFrame v-for="(arr,i) in arrs" :key="i" :animationProps="{prename:'3_000',sample:10,frames:attframes,loop:true}" :nodeProps="arr" />
      </Node>
      <!-- <Node v-if="attframes" :nodeProps="{x:200}" >
        <AnimationFrame v-for="(arr,i) in arrs" :key="i" :animationProps="{prename:'3_000',sample:10,frames:attframes,loop:true}" :nodeProps="arr" />
      </Node> -->
      <!-- <AnimationFrame v-if="frames" :animationProps="{prename:'3_000',sample:8,frames:frames,loop:true}" :nodeProps="{x:-400,scale:1}" />
      <AnimationFrame v-if="attframes" :animationProps="{prename:'3_000',sample:10,frames:attframes,loop:true}" :nodeProps="{x:400,scale:1}" /> -->
      <!-- <Node ref="sprite" :nodeComps="comps" :nodeProps="nprops" /> -->

  </CocosScene >
</template>

<script>
/* eslint-disable */

import {CocosScene,Node,AnimationFrame,Sprite,CocosWrap} from "./cocos";
// import CocosScene from "../components/CocosScene";
// import Node from "../components/Node";
// import Sprite from "../components/Sprite";

import AnimCCComponent from './libs/Anim.cccomponent';

import FlipAction from './flip';
// import SpriteNode from "../components/SpriteNode";

const USE_VUE = true;//false;//true;
const total = 400;

export default {
  name: "Scene1",
  components: {
    CocosScene,Node,Sprite,AnimationFrame,
  },
  data() {
    return {
      comps: [],
      frame:null,
      scomp:null,
      opacityt:180,
      clTwo:cc.color(255,0,0),
      nprops:{
        name:'cb',opacity:180,x:0,y:0,onTouchStart:(e)=>this.onTouchStart(e),width:1024,height:1024,color:'#f00',
      },
      ncomps:[],
      ncomp:null,
      sprops:{
        type:2,//cc.Sprite.Type.TILED,
        sizeMode:0,
        // srcBlendFactor:cc.macro.BlendFactor.SRC_ALPHA, dstBlendFactor:cc.macro.BlendFactor.ONE,
      },
      frames:null,
      attframes:null,
    };
  },
  // computed: {
  //   animationProps(){
  //     return {atlas:this.animationAtlas,loop:true};
  //   },
  // },
  mounted() {
    //banyu
    // cc.assetManager.loadRemote("./banyu.png", (err, tex) => {
    //     // this.frame = new cc.SpriteFrame(tex);
    //     let frame = new cc.SpriteFrame(tex);
    //     // this.scomp = {
    //     //   type: cc.Sprite,
    //     //   props: {
    //     //       spriteFrame: frame,
    //     //       sizeMode: cc.Sprite.SizeMode.CUSTOM,
    //     //   },
    //     // };
    //     // this.comps = [this.scomp];
    //     this.frame = frame;//{type:"frame",value:frame};
    //     this.toggleRotation();
    //     // if(this.$refs.sprite && this.$refs.sprite.ccnode){
    //     //   this.$refs.sprite.ccnode.runAction(cc.rotateBy(5, 360).repeatForever());
    //     // }
    //     // this.startrot();

    //     this.ncomp = {
    //         type: FlipAction,
    //         props: {
    //           delay:0,
    //           duration:0.8,
    //             doing: true,
    //         },
    //       };

    //     // this.ncomps = [
    //     //   {
    //     //     type: FlipAction,
    //     //     props: {
    //     //         doing: true,
    //     //     },
    //     //   }
    //     // ]; cc.SpriteAtlas,
    // });

    cc.assetManager.loadRemote("./examples/polygon/btnRot.png", (err, tex) => {
        let frame = new cc.SpriteFrame(tex);
      if(USE_VUE){
        this.onloadimage2(frame,total);  
      }else{
        this.onloadimage(frame,total);  
      }
        
    });

    // CocosWrap.loadAtlasFrames("./examples/attack.plist","./examples/attack.png",(frames)=>{
    //   this.frames = frames;
    // });

    CocosWrap.loadAtlasFrames("./examples/run.plist","./examples/run.png",(frames)=>{
      if(USE_VUE){
        this.onloadframe2(frames,total);
      }else{
        this.onloadframe(frames,total);
      }
    });

    // this.startopacity();
    this.createlabel("total is "+total);
  },
  methods: {
    createlabel(str){
        let node = CocosWrap.create({
          color:"#f00",zIndex:100
        },[                    {
                        type: cc.Label,
                        props: {
                            string: str,
                            fontSize:80,
                            // overflow: overflow[this.props.overflow],
                            lineHeight:80,
                            // horizontalAlign,
                            // verticalAlign,
                        },
                    },
      ]);
        node.parent = this.$refs.scene.ccnode;
    },
    onloadimage2(frame,total){
        let arrs = [];
        for(let i = 0 ; i < total ; i++){
          let x = Math.random() * 1400 - 700;
          let y = Math.random() * 1200 - 600;
          let angle = Math.random() * 360;
          arrs.push({
          x,y,angle,color:"#00f"
          });
        }
        this.farrs = arrs;
        this.frame = frame;
    },
    onloadimage(frame,total){
      let ppp= this.$refs.scene.ccnode;
        let rect = frame.getRect();
        let width = rect.width;
        let height = rect.height;

      for(let i = 0 ; i < total ; i++){
        let x = Math.random() * 1200 - 600;
        let y = Math.random() * 1200 - 600;
        let angle = Math.random() * 360;
        let node = CocosWrap.create({
          x,y,angle,width,height,color:"#00f"
        },[{
          type: cc.Sprite,
          props: {
            sizeMode: cc.Sprite.SizeMode.TRIMMED,
            spriteFrame: frame
          }
        }]);
        node.parent = ppp;
      }
    },
    onloadframe2(frames,total){
        let arrs = [];
        for(let i = 0 ; i < total ; i++){
          let x = Math.random() * 1400 - 700;
          let y = Math.random() * 1200 - 600;
          let angle = Math.random() * 360;
          arrs.push({
          x,y,angle
          });
        }
        this.arrs = arrs;
        this.attframes = frames;
    },
    onloadframe(frame,total){
      let ppp= this.$refs.scene.ccnode;
      for(let i = 0 ; i < total ; i++){
        let x = Math.random() * 1400 - 700;
        let y = Math.random() * 1200 - 600;
        let angle = Math.random() * 360;
        let node = CocosWrap.create({
          x,y,angle
        },[{
          type: cc.Sprite,
        props: {
          sizeMode: cc.Sprite.SizeMode.TRIMMED,
        }
        }, {
                        type: cc.Animation,
                    },{
                        type: AnimCCComponent,
                        props: {
                            prename:'3_000',sample:10,frames:frame,loop:true,
                        },
                    }          
        ]);
        node.parent = ppp;
      }
      
    },
    getProps(i){
      let x = Math.random() * 1400 - 700;
      let y = Math.random() * 1200 - 600;
      let angle = Math.random() * 360;
      // console.log("getProps",i,x,y);
      return {x,y,angle};
    },
    onTouchStart(e){
      // console.log("onTouchStart",e,this);
      this.toggleRotation();
    },
    toggleRotation(){
      // this.rotating = !this.rotating;
      if(this.$refs.sprite && this.$refs.sprite.ccnode){
        if(this.rotating){
          this.$refs.sprite.ccnode.stopAction(this.rotating);
          this.rotating = null;
        }else{
          this.rotating = cc.rotateBy(5, 360).repeatForever();
          this.$refs.sprite.ccnode.runAction(this.rotating);
          // this.$refs.sprite.ccnode.stopAllActions();
        }
      }
    },
    startrot() {
      setTimeout(()=>{
        if(this.$refs.sprite && this.$refs.sprite.ccnode){
          let act = cc.rotateBy(10, 360);
          // cc.TweenAction
          this.$refs.sprite.ccnode.runAction(act.repeatForever());
        }else{
          this.startrot();
        }
      },50);
    },
    startopacity() {
      setTimeout(()=>{
        // let opacity = this.nprops.opacity;
        // // let opacity = this.opacityt;
        // opacity += 10;
        // if(opacity>250){
        //   opacity = 180;
        // }
        // // this.nprops.opacity = opacity;
        // this.nprops = {...this.nprops,opacity};//.opacity = opacity;
        // // this.opacityt = opacity;

        if(this.ncomp){
          this.ncomp = {
            type: FlipAction,
            props: {
              delay:0,
              duration:0.8,
              doing: true,//!this.ncomp.props.doing,
            },
          }
        }

        if(!this.aaaa){
          this.aaaa = true;
          this.nprops = { name:'cbb',opacity:180,x:-200,y:-200,onTouchStart:(e)=>this.onTouchStart(e),width:1024,height:1024};
          // this.nprops = { ...this.nprops,color:'#0000ff'};
        }

        this.startopacity();
      },10000);
    },
  },

};
</script>
